/* eslint-disable @typescript-eslint/no-explicit-any */
import React, { useState } from 'react';

import { Avatar, Breadcrumb,  Dropdown, Layout, Menu, Select, Switch, theme } from 'antd';
import { Outlet, useLocation, useNavigate } from 'react-router-dom';
import { elser } from './router';
import { useTranslation } from 'react-i18next';
import { SunOutlined, MoonOutlined } from '@ant-design/icons';
const { Header, Content, Footer, Sider } = Layout;



const App: React.FC = () => {
  const nav = useNavigate()
  const { pathname } = useLocation()
  const [collapsed, setCollapsed] = useState(false);
  const {
    token: { borderRadiusLG },
  } = theme.useToken();

  //i18n
  const { t, i18n } = useTranslation()

  const qh = (e: string) => {
    i18n.changeLanguage(e)
  }
  const home = (arr: any) => {
    return arr.map((item: any) => {
      return {
        key: item.path,
        label: t(`router.${item.title}`),
      }
    })
  }

  const items = home(elser)
  //退出登录
  const remove = () => {
    nav('/login')
    localStorage.clear()
  }
  //获取信息  
  const userInfo = localStorage.getItem('userinfo') || '{}'
  const { avator, username } = JSON.parse(userInfo)

  //夜间模式
  const [them, setTheme] = useState('light')
  const by = () => {
    const html = document.querySelector('html')
    if (html?.classList.contains('dark')) {
      html?.classList.remove('dark')
      setTheme('dark')
      localStorage.setItem('them', 'dark')
    } else {
      html?.classList.add('dark')
      setTheme('light')
      localStorage.setItem('them', 'light')
    }
  }

  const item = [
    {
      label: (
        <a onClick={remove}>{t('router.center')}</a>
      ),
      key: '0',
    },
    {
      label: (
        <a onClick={remove}>{t('router.exit')}</a>
      ),
      key: '1',
    }
  ]

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
        <div className='bg-[#001529] dark:bg-white' style={{ minHeight: '100%' }}>
          <Menu theme={them} onClick={({ key }) => nav(key)} defaultSelectedKeys={[pathname]} mode="inline" items={items} />
        </div>
      </Sider>
      <Layout >
        <Header style={{ padding: '0 ' }}>
          <div style={{ width: '100%', height: '100%', boxSizing: 'border-box' }} className='bg-[#001529] dark:bg-white'>
            <div style={{ float: 'right' }}>
              <span className='text-white dark:text-black'>{username}</span>
              <Dropdown menu={{ items: item }} trigger={['click']}>
                <Avatar src={avator} onClick={e => e.preventDefault()} />
              </Dropdown>

              <Select
                defaultValue="中文"
                style={{ width: 120 }}
                onChange={qh}
                options={[
                  { value: 'zh', label: '中文' },
                  { value: 'en', label: 'English' },
                  { value: 'jp', label: '日本語' },
                ]}
              />
              <Switch
                checkedChildren={< SunOutlined />}
                unCheckedChildren={<  MoonOutlined />}
                checked={them === 'light'}
                onClick={by}
              />
            </div>
          </div>
        </Header>
        <Content style={{ padding: '0 16px', }} className='bg-[#002140] dark:bg-[#f5f5f5]'>
          <Breadcrumb style={{ margin: '16px 0' }} items={[]} />
          <div
            style={{
              padding: 24,
              minHeight: 360,
              borderRadius: borderRadiusLG,
            }}
            className='bg-[#001529] text-white dark:text-black dark:bg-white'
          >
            <Outlet />
          </div>
        </Content>
        <Footer style={{ textAlign: 'center', padding: 0, margin: 0 }}>
          <div className='bg-[#001529] text-white dark:text-black dark:bg-white' style={{ padding: '13px 0' }}>
            Ant Design ©{new Date().getFullYear()} Created by Ant UED
          </div>
        </Footer>
      </Layout >
    </Layout >
  );
};

export default App;